<script setup>
import { computed, ref,watch,h } from 'vue'

import { Handle, Position, useVueFlow } from '@vue-flow/core'
import { NodeToolbar } from '@vue-flow/node-toolbar'
import { createLyla } from '@lylajs/web'
import { NodeHandler } from './node.js'

const { updateNodeData , onConnect, onNodeClick, nodes, onNodesChange } = useVueFlow()
const loading = defineModel("loading",{
    default:false
});

const props = defineProps(['id', 'data','toggle','sourceData',"source","target", "extend"])
const value = defineModel("value")
let sourceData = defineModel("sourceData");
let targetData = defineModel("targetData");

watch(()=>value.value,()=>{
    console.log(props.id," change:",value.value)
    updateNodeData(props.id,{value:value.value})
},{deep:true})
const se = ref();
const sourceNode = computed(()=>{
    if (se.value == null){
        return null
    }
    for (let node of nodes.value){
        if (node.id == se.value.target){
            return node
        }
    }
})
const targetNode = computed(()=>{
    if (se.value == null){
        return null
    }
    for (let node of nodes.value){
        if (node.id == se.value.source){
            return node
        }
    }
})


onConnect((connectInfo)=>{
    se.value = connectInfo

    if (sourceNode.id != props.id){
        sourceData.value = sourceNode.value.data.value
        watch(()=>sourceNode.value.data.value,(newVal)=>{
            sourceData.value = newVal
        },{deep:true})
        
    }else if  (targetNode.id == se.source && targetNode.id != props.id){
        targetData.value = targetNode.value.data.value
        watch(()=>targetNode.value.data.value,(newVal)=>{
            targetData.value = newVal
        },{deep:true})
    }

})

</script>
<template>
    
    <div  style="min-width:200px;max-width:30vw;max-height:50vh;overflow-y:auto;border-radius: 8px;border: 0px solid gray;margin: 0px;padding: 1px;text-align: justify;">
        <NodeToolbar :is-visible="props.extend != null" :position="Position.Right" >
            <n-space style="text-align: justify; ">
                <slot name="extend"></slot>
            </n-space>
            
        </NodeToolbar>
        <slot name="header"></slot>
        <n-spin :show="loading">
            <slot>
            </slot>
        </n-spin>
        <Handle v-if="props.source !=null"  type="source" :position="Position.Left" />
        <Handle v-if="props.target !=null"  type="target" :position="Position.Right" />
    </div>
    
</template>
<style>
.vue-flow__node-toolbar {
  display: flex;
  max-width: 35vw;
  overflow: auto;
  gap: 0.5rem;
  align-items: center;
  background-color: #313131;
  padding: 0px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.basic-flow.dark .vue-flow__node.selected {
    background: #313131;
    border-radius: 8px;
    /* box-shadow: 0 0 0 2px #000000; */
    box-shadow: 0 0  44px #000;
}

.vue-flow__node {
  box-shadow: 10px 10px 5px #1a192b;
  background-color: #333;
}

.basic-flow.dark .vue-flow__node {
    background: #313131;
    color: #fffffb;
}

.n-card{
    background-color: #333;
}
</style>